<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #p {
        background: #ccc;
        width: 60px;
        height: 60px;
        margin: 20px auto;
        text-align: center;
        line-height: 60px;
        color: rgb(40, 40, 44);
    }

    .box {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    .arr {
        width: 300px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;
        padding-left: 20px;
    }

    .hongse {
        color: chartreuse;
        width: 300px;
    }

    #app4 {
        width: 300px;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .tab {
        width: 300px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .red {
        color: red;
    }
</style>

<body>
    <div id="app">
        <div @mouseenter="a" @mouseleave="b" id="p">
            <p v-if="show">内容</p>
        </div>
    </div>

    <!-- 2 -->
    <div id="app2">
        <div class="box" v-if="c">
            内容
            <button @click="conceals">隐藏</button>
        </div>
        <button @click="shows">显示</button>
    </div>

    <!-- 3 -->
    <div id="app3" style="margin-top: 20px;">
        <div class="arr" @click="clicks=1" :class="{'hongse':clicks === 1}">微信</div>
        <div class="arr" @click="clicks=2" :class="{'hongse':clicks === 2}">支付宝</div>
        <div class="arr" @click="clicks=3" :class="{'hongse':clicks === 3}">银行卡</div>
    </div>

    <!-- 4 -->
    <div id="app4" style="margin-top: 20px;">
        <button @click="button=1" :class="{'red' :button === 1}">按钮一</button>
        <button @click="button=2" :class="{'red' :button === 2}">按钮二</button>
        <button @click="button=3" :class="{'red' :button === 3}">按钮三</button>
        <div class="tab" v-if="button === 1">内容一</div>
        <div class="tab" v-if="button === 2">内容二</div>
        <div class="tab" v-if="button === 3">内容三</div>
    </div>

    <!-- 5 -->
    <div id="app5" style="margin-top: 20px;">
        <div class="drop" @click="down = !down">{{boxs}}</div>
        <div v-show="down" v-for="(x,y) in select" @click="boxs = x; down = false">{{x}}</div>
    </div>

    <!-- 6 -->
    <div id="app6" style="margin-top: 20px;">
        <ul style="list-style-type: none;">
            <li><input type="text" placeholder="请输入内容" v-model="name"></li>
        </ul>

        <button @click="add">发送</button>
        <!-- {{list}} -->
        <ul style="list-style-type: none;">
            <li v-for="(a,b) in list">{{a.name}}
            <button @click="deletes(b)">删除</button></li>
        </ul>
    </div>

    <!-- 7 -->
    <div id="app7" style="margin-top: 20px;">
        <input :type="con?'text':'password'">
        <input type="checkbox" @click="con= !con">
        <button>密码</button>
    </div>

    <!-- 8 -->
    <div id="app8" style="margin-top: 20px;">
        <textarea type="text" v-model="number" maxlength="50"></textarea>
        <span>{{50-number.length}}/200</span>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            let show = ref(false)
            function a() {
                show.value = true;
            }
            function b() {
                show.value = false;
            }
            return {
                a, b, show
            }
        }
    }).mount('#app')

    // 2
    createApp({
        setup() {
            let c = ref(false)
            function conceals() {
                c.value = false
            }
            function shows() {
                c.value = true
            }
            return {
                c,
                conceals,
                shows
            }
        }
    }).mount('#app2')

    // 3
    createApp({
        setup() {
            let red = ref('hongse')
            let clicks = ref()
            return {
                red,
                clicks
            }
        }
    }).mount('#app3')

    // 4
    createApp({
        setup() {
            let button = ref(1)
            let red = ref('red')
            return {
                red,
                button
            }
        }
    }).mount('#app4')

    // 5
    createApp({
        setup() {
            let select = ref(['1', '2', '3', '4', '5'])
            let down = ref(false)
            let boxs = ref('1')
            return {
                select,
                down,
                boxs
            }
        }
    }).mount('#app5')

    // 6
    createApp({
        setup() {
            let name = ref('')
            let list = ref([])
            function add() {
                list.value.push({
                    name: name.value
                })
                name.value = ''
            }
            function deletes(b){
                list.value.splice(b,1)
            }

            return {
                name,
                add,
                list,
                deletes
            }
        }
    }).mount('#app6')

    // 7
    createApp({
        setup(){
            let con=ref(false)
            return{
                con
            }
        }
    }).mount('#app7')

    // 8
    createApp({
        setup(){
            let number = ref('')
            return{
                number
            }
        }
    }).mount('#app8')
</script>

</html>